<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0" />
    <title>宫格布局动画效果</title>
    <meta
      name="keywords"
      content="demo,js,css,grid,animate,技术方案,使用scss" />
    <style id="sass_style"></style>
  </head>

  <body>
    <div class="outbox">
      <div class="container-outbox">
        <div class="container">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>
    </div>
    <script type="module">
      const sass = await import('https://jspm.dev/sass')
      let sassStyleSData = sass.compileString(`
body {
  background: #000;
  margin:0;
  padding:8px
}
.outbox {
  width:400px;
  max-width:90vw;
  margin:0 auto;
}
.container-outbox {
  width:100%;
  padding-bottom:100%;
  position:relative;
}
.container {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  transition:0.5s;
}

@for $i from 0 through 8 {
  .item:nth-child(#{$i + 1}) {
    background: hsl($i * 40, 100%, 75%);
  }

  .container:has(.item:nth-child(#{$i + 1}):hover) {
    $r: floor(calc($i / 3) + 1);
    $c: $i%3 + 1;
    $arr: 1fr 1fr 1fr;
    $rows: set-nth($arr, $r, 2fr);
    $cols: set-nth($arr, $c, 2fr);
    grid-template-rows: $rows;
    grid-template-columns: $cols;
  }
}
      `)
      document.querySelector('#sass_style').innerHTML = sassStyleSData.css
    </script>
  </body>
</html>
